import React, {Component} from 'react';
import Merge from 'extend';
import {Button, Col, Input, Popconfirm, Row, Table} from "antd";
import Lng from "./lng";
import AddModal from "./AddModal";
import DetailModal from "./DetailModal";
import EditModal from "./EditModal";

class BaseModule extends Component {
    constructor(props) {
        super(props);

        this._page = {
            items: [],
            sortName: "create_time",
            sortType: "DESC"
        }

        this.toolbar = {
            search: true,
            add: true
        }
    }

    state = {
        dataSource: [],
        pageNum: 0,
        pageSize: 5,
        total: 0,
        loading: false
    }

    loadData() {
    }

    addClick() {
    }

    edit() {
    }

    remove() {
    }

    componentDidMount() {
        this.loadData();
    }

    superLoadData(request) {
        const self = this;
        self.setState({
            loading: true
        });
        Merge(this._page, this.state, true);
        request(this._page, (data) => {
            self.setState({
                dataSource: data.data.content,
                pageNum: data.data.number,
                pageSize: data.data.size,
                total: data.data.totalElements,
                loading: false
            });
        })
    }

    onShowSizeChange(current, size) {
        this.setState({
            pageNum: current - 1,
            pageSize: size
        }, () => {
            this.loadData();
        });
    }

    onChange(current, size) {
        this.setState({
            pageNum: current - 1
        }, () => {
            this.loadData();
        });
    }

    renderSearchBar(placeholder, searchs = []) {
        return <Row>
            {
                this.toolbar.search ? <Col span={18}>
                    <Input ref={"input"}
                           placeholder={Lng.get("common.placeholder", {some: placeholder})}/>
                </Col> : null
            }
            {
                this.toolbar.search ? <Col span={2} className={"center"}>
                    <Button type="primary" icon="search"
                            onClick={this.loadData.bind(this)}>{Lng.get("common.search")}</Button>
                </Col> : null
            }

            {
                this.toolbar.add ? <Col span={1} className={"center"}>
                    <Button type="primary" icon="plus-circle-o"
                            onClick={this.addClick.bind(this)}>{Lng.get("common.add", {name: ""})}</Button>
                </Col> : null
            }

            {
                searchs.map((s) => {
                    return <Col>
                        {s}
                    </Col>
                })
            }
        </Row>;
    }

    renderTable(columns) {
        const state = this.state;
        return <Table
            rowKey={"".uuid()}
            loading={state.loading}
            columns={columns}
            dataSource={this.state.dataSource}
            pagination={{
                defaultCurrent: 1,
                current: state.pageNum + 1,
                total: state.total,
                pageSize: state.pageSize,
                pageSizeOptions: ["5", "10", "20"],
                showSizeChanger: true,
                onShowSizeChange: this.onShowSizeChange.bind(this),
                onChange: this.onChange.bind(this)
            }}/>
    }

    renderModal(refName, content, title, request, callback, validate) {
        const self = this;
        return <AddModal
            ref={refName}
            content={content}
            titleName={title}
            request={request}
            callback={(data) => {
                callback ? callback(data) : self.loadData();
            }}
            validate={validate}
        />
    }

    renderEditModal(refName, content, title, id, request, callback) {
        const self = this;
        return <EditModal
            ref={refName}
            content={content}
            titleName={title}
            request={request}
            id={id}
            callback={() => {
                callback ? callback() : self.loadData();
            }}
        />
    }

    renderDetailModal(refName, content, title, id) {
        return <DetailModal
            ref={refName}
            content={content}
            titleName={title}
            id={id}
        />
    }
}

export default BaseModule;